<!--
 * @Author: WLang
 * @LastEditors: WLang
 * @Description: 
 * @Date: 2023-07-03 17:04:23
 * @LastEditTime: 2023-07-03 19:04:57
 * @FilePath: \myblog\src\components\comment\CommentItem.vue
-->
<template>
  <li class="blog-comment--item">
    <div class="blog-comment--user">
      <div class="blog-comment--avatar">
        <img :src="uid.avatar" alt="!">
      </div>
      <span class="blog-comment--name">{{uid.nikname}}</span>
    </div>
    <p class="blog-comment--content">{{content}}</p>
    <p class="blog-comment-date">{{date}}</p>
  </li>
</template>

<script>
export default {
  components:{},
  data(){
    return {
    }
  },
  props: {
    uid: {
      type: Object
    },
    content: {
      type: String
    },
    date: {
      type: String
    }
  },
created(){
},
mounted(){},
watch:{},
computed:{},
methods:{},
}
</script>
<style lang="scss" scoped>
.blog-comment--item {
  background-color: #f5f5f5;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-bottom: 5px;
  .blog-comment--user {
    display: flex;
    align-items: center;
  }
  .blog-comment--avatar img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px;
  }
}
</style>